<template>
    <div ref="propertyPanel" class="property-panel">
        <div v-if="nodeName" class="node-name">{{ nodeName }}</div>
        <component :is="getComponent" v-if="element" :fromList="fromList" :element="element" :modeler="modeler" :users="users"
            :groups="groups" @dataType="dataType" />
    </div>
</template>

<script>
import { NodeName } from "../lib/translationsGerman"
import taskPanel from "./components/taskPanel.vue"
import processPanel from "./components/process.vue"
import sequenceFlowPanel from "./components/sequenceFlow.vue"
import gatewayPanel from "./components/gateway.vue"
import startPanel from "./components/start.vue"
import endPanel from "./components/end.vue"
export default {
    name: 'PropertyPanel',
    components: { taskPanel, processPanel, sequenceFlowPanel, gatewayPanel, startPanel, endPanel },
    props: {
        modeler: {
            type: Object,
            required: true
        },
        users: {
            type: Array,
            required: true
        },
        fromList: {
            type: Array,
            required: true
        },
        groups: {
            type: Array,
            required: true
        },
    },
    data() {
        return {
            element: null,
            form: {
                id: '',
                name: '',
                color: null
            },
            roles: [
                { value: 'manager', label: '经理' },
                { value: 'personnel', label: '人事' },
                { value: 'charge', label: '主管' }
            ]
        }
    },
    computed: {
        getComponent() {
            const type = this.element?.type;
            if (['bpmn:StartEvent'].includes(type)) {
                return 'startPanel'
            }
            if (['bpmn:IntermediateThrowEvent', 'bpmn:EndEvent'].includes(type)) {
                return 'endPanel'
            }
            if ([
                'bpmn:UserTask',
                'bpmn:Task',
                'bpmn:SendTask',
                'bpmn:ReceiveTask',
                'bpmn:ManualTask',
                'bpmn:BusinessRuleTask',
                'bpmn:ServiceTask',
                'bpmn:ScriptTask'
                // 'bpmn:CallActivity',
                // 'bpmn:SubProcess'
            ].includes(type)) {
                return 'taskPanel'
            }
            if (type === 'bpmn:SequenceFlow') {
                return 'sequenceFlowPanel'
            }
            if ([
                'bpmn:InclusiveGateway',
                'bpmn:ExclusiveGateway',
                'bpmn:ParallelGateway',
                'bpmn:EventBasedGateway'
            ].includes(type)) {
                return 'gatewayPanel'
            }
            if (type === 'bpmn:Process') {
                return 'processPanel'
            }
            return null
        },
        nodeName() {
            if (this.element) {
                console.log(this.element.type)
                const bizObj = this.element.businessObject
                const type = (bizObj ? bizObj.eventDefinitions : null) ? bizObj.eventDefinitions[0].$type
                    : bizObj.$type
                return NodeName[type] || type
            }
            return ''
        }
    },
    mounted() {
        this.handleModeler()
    },
    methods: {
        handleModeler() {
            this.modeler.on('root.added', e => {
                if (e.element.type === 'bpmn:Process') {
                    this.element = null
                    this.$nextTick().then(() => {
                        this.element = e.element
                    })
                }
            })
            this.modeler.on('element.click', e => {
                const { element } = e
                if (element.type === 'bpmn:Process') {
                    this.element = element
                }
            })
            this.modeler.on('selection.changed', e => {
                // hack 同类型面板不刷新
                this.element = null
                const element = e.newSelection[0]
                if (element) {
                    this.$nextTick().then(() => {
                        this.element = element
                    })
                }
            })
        },
        /** 获取数据类型 */
        dataType(data) {
            this.$emit('dataType', data)
        }
    }
}
</script>

<style lang="less" scoped>
.property-panel {
    /* padding: 20px 20px; */

}

.node-name {
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    padding: 10px 0;
}

/deep/ .ant-form-item {
    margin-bottom: 5px;
}

/deep/ .ant-input-group-addon {
    i {
        cursor: pointer;
    }
}

/deep/ .collapseHeader {
    i {
        margin-right: 5px;
    }
}
</style>